<template>
    <div class="x-login-container">
        <div class="hert" :style="{backgroundImage:`url(${bgHert}) `}"></div>
        <div class="main">
            <div class="jpaas">
                <span>{{ loginPageTitle }}</span>
            </div>
            <a-form
                id="formLogin"
                class="user-layout-login"
                ref="formLogin"
                :model="form"
                :rules="rules"
                @finish="login"
            >
                <div class="jpaasbutton">
                    <a-form-item style="width:100%;" name="password">
                        <a-input
                            size="large"
                            type="password"
                            autocomplete="false"
                            :placeholder="i18n('message.password','请输入密码','input')"
                            @enter="login"
                            v-model:value="form.password"
                            style="width: 100%"
                        >
                            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item style="width:100%;" name="password_li">
                        <a-input
                            size="large"
                            type="password"
                            autocomplete="false"
                            :placeholder="i18n('message.passwordConfirm','请输入确认密码','input')"
                            @enter="login"
                            v-model:value="form.password_li"
                            style="width: 100%"
                        >
                            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item style="width:100%;">
                        <a-button

                            size="large"
                            type="primary"
                            htmlType="submit"
                            class="login-button"
                            :loading="registerBtn"
                            :disabled="registerBtn">
                            {{$ti18('rxForm.okBtn','确定')}}
                        </a-button>
                    </a-form-item>
                </div>
            </a-form>
        </div>
        <div class="x-login-copyright">{{loginPageCopyright}}</div>
    </div>
</template>

<script>
import LoginApi from "@/common/api/login.js";
import {mapActions} from 'pinia'
import md5 from "js-md5";
import userUser from "../../stores/userUser";
import {TokenUtil} from "@lowcode/jpaas-base-lib";
import {sm2} from 'sm-crypto';
import useMain from "../../stores/useMain";
import Cookies from 'js-cookie';
import hert from '@public/image/login/hert.png';
export default {
    name: "Login",
    data() {
        return {
            loginPageTitle:this.i18n('message.firstLogin','首次登录修改密码'),
            //默认logo
            loginPageCopyright: 'Copyright 2018-2024'+this.i18n("message.companyName","广州红迅软件有限公司"),
            bgHert:hert,
            rules: {
                password: [
                    {required: true, message: this.i18n('message.password','请输入密码','input')}
                ],
                password_li: [
                    {required: true, message: this.i18n('message.passwordConfirm','请输入确认密码','input')}
                ]
            },
            form: {
                password: '',
                password_li: ''
            },
            registerBtn:false,
            //密码模式
            passwordmode: "default",
            //国产sm2公钥
            sw2PublicKey: import.meta.env.JPAAS_SM2_PUBLIC_KEY,
        }
    },
    created() {
        //获取登录相关的配置参数
        this.getLoginConfig();
    },
    methods: {
        ...mapActions(userUser, ['setPasswordMode', 'Login','setIsFirstLogin']),
        ...mapActions(useMain,['setLogined']),
        i18n(name, text, key) {
            return this.$ti18(name, text, "viewsUser", key);
        },
        handlePasswordCheck () {
            const password = this.form.password;
            const password_li = this.form.password_li;
            if (password.trim() !== password_li.trim()) {
                this.$message.error(this.i18n('tips.notMatch','两次密码不一致'));
                return false;
            }
            return true;
        },
        //获取登录相关的配置参数
        async getLoginConfig() {
            let self = this;
            await LoginApi.getLoginConfig().then((res) => {
                let result = res.data;
                //密码加密模式
                self.passwordmode = result.passwordmode;
            });
        },
        sm2Encrypt(password) {
            let pwd = sm2.doEncrypt(password, this.sw2PublicKey);
            return pwd.toString();
        },
        //登录
        login(e) {
            let isTrue = this.handlePasswordCheck();
            debugger
            if (!isTrue) {
                return;
            }
            let self = this;
            let values ={
                password: this.form.password.trim(),
            };
            let token = TokenUtil.getToken();
            if ("md5" == self.passwordmode) {
                values.password =self.$md5(values.password.trim())
            } else if ("sm2" == self.passwordmode) {
                values.isSm2Password="YES";
                values.password =self.sm2Encrypt(values.password.trim())
            }
            const loginParams = {
                token: token,
                ...values };
            LoginApi.changePassword(loginParams).then(res => {
                if (res.success) {
                    self.$message.success(res.message);
                    Cookies.remove("IdToken")
                    Cookies.remove("AccessToken")
                    Cookies.remove("Authorization")
                    Cookies.remove("XXL_JOB_LOGIN_IDENTITY")
                    TokenUtil.removeToken();
                    Cookies.remove("AUTHORIZATION_TOKEN");
                    Cookies.remove("LOGIN_TYPE");
                    self.setLogined(false);
                    self.setIsFirstLogin(false);

                    self.$router.push({name: 'login'})
                    return;
                }
                self.$message.error(res.message);
            })
        },
        //登录成功处理
        loginSuccess(res) {
        },
        //登录失败处理
        requestFailed(err) {
        },
    }
}
</script>

<style scoped>
.jpaas {
    font-size: 20px;
    color: #29304C;
    text-align: center;
    margin-bottom: 20px;
}

.x-login-copyright{
    text-align: center;
    position: absolute;
    bottom: 20px;
    width: 100%;
    color: #fff;
}
.login-button{
    display: block;
    width: 100%;
}

.hert {
    position: absolute;
    max-width: 43.2%;
    width: 100%;
    height: 0;
    padding-bottom: 34.54%;
    top: 50%;
    left: 10%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    z-index: 1;
    background-position: 20% center;
    background-repeat: no-repeat;
    background-size: contain;
}

.x-login-container {
    width: 100%;
    min-height: 100%;
    background: -webkit-gradient(linear, right top, left bottom, from(#409eff), to(#99aefd));
    background: linear-gradient(to left bottom, #409eff, #99aefd);
    background-size: 100%;
    position: relative;
    display: flex;
}


.main {
    padding: 20px 40px;
    overflow: hidden;
    width: 440px !important;
    background-color: #ffffff;
    box-shadow: 0px 0px 49px 0px rgba(7, 63, 126, 0.24);
    border-radius: 16px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 10%;
    z-index: 9;
}



.jpaasbutton {
    overflow: hidden;
    margin: auto;
}

.hermg {
    width: 54px;
    margin: 0 auto 10px;
}
.hermg img {
    width: 54px;
}
</style>
